<template>
	<z-paging
		ref="page"
		v-model="dataList"
		@query="query"
	>
		<view slot="top" class="topTabbar">
			<u-tabs :current="currentTab" :list="tabList" @change="tabChange" :scrollable="false"></u-tabs>
		</view>
		<view class="pageCountainer">
			<view
				class="pageCountainer_orderItem"
				v-for="item in dataList"
				:key="item.id"
				@click="toNext(item)"
			>
				<u-image height="136rpx" width="136rpx" :src="item.thumbnail" mode="aspectFill" radius="10rpx" />
				<view class="pageCountainer_orderItem_title">
					<u-text
						:text="item.goodsName"
						bold
						size="28rpx"
						color="#3d3d3d"
						lines="1"
						margin="10rpx 0 28rpx"
					/>
					
					<view class="flex_wrap row_between">
						<u-text
							:text="'待使用：'+ (item.total-item.usedCount)"
							color="#588BF3"
							size="24rpx"
						/>
						<u-icon
							bold
							name="arrow-right"
							size="26rpx"
							color="#588BF3"
						/>
					</view>
				</view>

				
			</view>
		</view>
	</z-paging>
</template>

<script>
	import { listGoodsServiceRecord } from "@/api/order.js"
	export default {
		data() {
			return {
				tabList: [{
						name: "待使用",
						id: 0,
					},
					{
						name: "已使用",
						id: 1,
					},
				],
				currentTab: 0,
				dataList: [],
				customerId:''
			}
		},
		onShow() {
			this.$refs.page.reload();
		},
		onLoad(options) {
			this.customerId = options.customerId || ''
			console.log(options.customerId, "gengduo",this.customerId);
		},
		methods: {
			toNext(e) {
				const data = JSON.stringify(e);
				this.$u.route({
					url: "/pages_shop1/product_message/index",
					params: {
						data,
						customerId:this.customerId
					},
				});
			},
			async tabChange(e) {
				this.currentTab = e.index;
				await this.$refs.page.reload();
			},
			async query(pageNum, pageSize) {
				const params = {
					pageNum,
					pageSize,
					orderType: 1,
					allUsed :this.currentTab ? 1 : 0,
					customerId: this.customerId
				}
				const result = await listGoodsServiceRecord(params)
				this.$refs.page.complete(result.data.rows)
			}
		}
	}
</script>

<style lang="scss">
	.topTabbar {
		background-color: #fff;
		padding-bottom: 16rpx;
	}
	.pageCountainer {
		width: 100vw;
		padding:28rpx;
		box-sizing: border-box;

		&_orderItem {
			display: flex;
			background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 12rpx;
			margin-bottom: 24rpx;
			padding: 16rpx 24rpx 16rpx 16rpx;
			&_title{
				margin-left: 18rpx;
				width: 500rpx;
			}
		}
	}
</style>